<template>
  <div>
    <el-row>
      <el-col>

        <dy-panel>
          <dy-panel-header title="文章编辑"></dy-panel-header>
          <dy-panel-body>
            <el-form
              :model="updateForm"
              :rules="rules"
              ref="updateForm"
              label-width="100px"
              class="demo-ruleForm"
              @submit.native.prevent
            >
              <el-row>
                <el-row>
                  <el-col :xs="24" :sm="24" :md="24">
                    <el-form-item label="标题" prop="contentTitle">
                      <el-input v-model="updateForm.contentTitle" placeholder="请输入文章标题" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24">
                    <el-form-item label="关键字" prop="contentKeyword">
                      <el-input v-model="updateForm.contentKeyword" placeholder="请输入关键字(单个关键字长度不超过5,多个关键字使用英文半角逗号隔开)"
                                clearable></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :xs="24" :sm="24" :md="24">
                    <el-form-item label="缩略图" prop="datasourceName">
                      <el-upload
                        auto-upload
                        :action="uploadImgURL"
                        list-type="picture-card"
                        name="uploadFormFile"
                        :headers="updateHeaders"
                        :data="updateLoadData"
                        :on-success="handlePictureSuccess"
                        :on-preview="handlePictureCardPreview"
                        :file-list="fileList"
                        :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                      </el-dialog>
                    </el-form-item>
                  </el-col>

                </el-row>
                <el-row>
                  <el-col :xs="24" :sm="12" :md="8">
                    <el-form-item label="文章类别" prop="fkCategoryCode">
                      <select-tree v-model="updateForm.fkCategoryCode" placeholder="请选择文章类别"
                                   :treeList="treeList"
                                   :props="treeProps"></select-tree>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="8">
                    <el-form-item label="作者" prop="contentAuthor">
                      <el-input v-model="updateForm.contentAuthor" placeholder="请输入作者" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="8">
                    <el-form-item label="来源" prop="contentSource">
                      <el-input v-model="updateForm.contentSource" placeholder="请输入来源" clearable></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :xs="24" :sm="12" :md="8">
                    <el-form-item label="置顶" prop="top">
                      <el-radio v-model="updateForm.top" :label="1" value="1">是</el-radio>
                      <el-radio v-model="updateForm.top" :label="0" value="0">否</el-radio>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="8">
                    <el-form-item label="推荐" prop="recommend">
                      <el-input v-model="updateForm.recommend" placeholder="请输入推荐指数" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="8">
                    <el-form-item label="点赞" prop="supportCount">
                      <el-input v-model="updateForm.supportCount" placeholder="请输入点赞数量" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="8">
                    <el-form-item label="是否显示" prop="contentDisplay">
                      <el-radio v-model="updateForm.contentDisplay" :label="1" value="1">是</el-radio>
                      <el-radio v-model="updateForm.contentDisplay" :label="0" value="0">否</el-radio>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :xs="24" :sm="24" :md="24">
                    <el-form-item label="文章描述" prop="contentDescription">
                      <el-input type="textarea" :rows="3" v-model="updateForm.contentDescription" placeholder="请输入文章描述"
                                clearable></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <quill-editor v-model="updateForm.contentDetails"></quill-editor>
                </el-row>
                <el-row>
                  <el-col>
                    <div style="padding: 30px;text-align: center">
                      <el-button type="primary" @click="submitForm" :loading="submitLoading">立 即 保 存</el-button>
                    </div>
                  </el-col>
                </el-row>
                <div style="height: 100px">

                </div>
              </el-row>

            </el-form>
          </dy-panel-body>
        </dy-panel>

      </el-col>
    </el-row>

  </div>
</template>
<script>
  import HttpCode from '@/js/httpCode.js'
  import cmsTbContentApi from '@/apis/cmsApp/cmsTbContentApi.js'
  import QuillEditor from '../../../components/quillEditor/QuillEditor'
  import Config from '@/js/config.js'
  import loginApi from '@/apis/loginApi.js'
  import DyPanelHeader from '../../../view/panel/DyPanelHeader'
  import DyPanelBody from '../../../view/panel/DyPanelBody'
  import DyPanel from '../../../view/panel/DyPanel'

  export default {
    name: 'CmsContentUpdate',
    components: {
      DyPanel,
      DyPanelBody,
      DyPanelHeader,
      QuillEditor,
      SelectTree: () => import('@/components/selecttree/SelectTree.vue')
    },
    data () {
      return {
        submitLoading: false,
        uploadImgURL: Config.uploadURL,
        fileList: [],
        updateLoadData: {
          uploadPath: '/webApp/images'
        },
        updateHeaders: {
          authorization: loginApi.getToken()
        },
        updateForm: {},
        treeProps: {
          children: 'children',
          label: 'categoryName',
          valueKey: 'categoryCode'
        },
        dialogImageUrl: '',
        dialogVisible: false,
        treeList: [],
        rules: {}
      }
    },
    created () {
      this.treeList = this.$route.query.treeList
      if (this.$route.query.id != undefined) {
        cmsTbContentApi.selectById(this.$route.query.id).then((msg) => {
          this.updateForm = msg.row
          let fileStrArray = this.updateForm.contentImgs.split(';')
          for (let row of fileStrArray) {
            if (row != '') {
              this.fileList.push({
                name: row, url: Config.baseURL + row,
                row: row,
              })
            }
          }
        })
      }
    },
    methods: {
      submitForm () {
        this.$refs['updateForm'].validate(valid => {
          this.submitLoading = true
          if (valid) {
            this.submitFormHandle()
          } else {
            this.cancelSubmitForm()
          }
        })
      },
      submitFormHandle () {
        if (this.updateForm.id == undefined || this.updateForm.id == '') {
          cmsTbContentApi
            .addService(this.updateForm)
            .then(msg => {
              this.submitLoading = false
              this.updateForm.id = msg.row.id
              this.$message({
                message: msg.msg,
                type: 'success'
              })
            })
            .catch(msg => {
              if ((msg.cdoe = 400)) {
                this.formError(msg)
              }
              this.submitLoading = false
            })
        } else {
          cmsTbContentApi.updateService(this.updateForm)
            .then(msg => {
              this.submitLoading = false
              this.$message({
                message: msg.msg,
                type: 'success'
              })
            }).catch(msg => {
            if ((msg.cdoe = 400)) {
              this.formError(msg)
              this.submitLoading = false
            }
          })
        }
      },
      formError (msg) {
        if (msg.code == HttpCode.E400) {
          for (let row of msg.errors) {
            let fields = this.$refs['updateForm'].fields.filter(it => {
              return it.prop == row.errName
            })
            if (fields.length > 0) {
              fields[0].validateMessage = row.errMsg
              fields[0].validateState = 'error'
            }
          }
        }
      },
      handleRemove (file, fileList) {
        this.parseFileNameList(fileList)
      },
      handlePictureCardPreview (file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      handlePictureSuccess (response, file, fileList) {
        if (response.code != HttpCode.E200) {
          this.$message(response.msg)
          fileList.pop()
          this.parseFileNameList(fileList)
        } else {
          this.parseFileNameList(fileList)
        }
      },
      parseFileNameList (fileList) {
        console.log('转换文件')
        console.log(fileList)
        let filePathList = fileList.map(it => it.response == undefined ? it.row : it.response.row)
        this.updateForm.contentImgs = filePathList.join(';')
        console.log(this.updateForm.contentImgs)
      }
    },
    props: {
      treeList: {
        type: Array,
        default: []
      },
      formKey: {
        type: String,
        default: 'currentForm'
      },
      data: {
        type: Object,
        default: {}
      }
    },
    computed: {
      submitFormEventListener () {
        return this.$store.getters.onEvent(`${this.formKey}-submitForm`)
      }
    },
    watch: {
      submitFormEventListener: function (a, b) {
        if (a == null || a == b) {
          return null
        }
        this.submitForm()
      }
    }
  }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }

  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
</style>
